
#include('head.html', {title : '个人信息'})
<link rel="stylesheet" href="/static/css/style2.css" type="text/css" />
<style>
    <!--#pageGro{ width:400px; height:25px; margin:0px auto;margin-left:600px;}-->
    <!--#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}-->
    <!--#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}-->
    <!--#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}-->
    <!--#pageGro .pageUp,#pageGro .pageDown{ width:63px; text-indent:5px; border:1px solid #999; cursor:pointer;}-->

    .lw_img{
        width: 35px;
        height: 49px;
        border-radius: 5px;
        margin-right: 15px;
    }
    .lw_user{
        width:150px;
    }
    .lw_user:hover{
        color:#00a78e;
    }

    .header1 {
        width: 50px;
        height: 50px;
        line-height: 50px;
        bottom: 60px;
        right: 60px;
        position: fixed;
    }
    .header1 .icon1 {
        display: inline-block;
        font-size: 26px;
        color: #fff;
        line-height:50px;
    }
    .header1 .icon-box {
        font-size: 0;
        position: relative;
        float: right;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        z-index:999999;
        background:#3998ea;
        border-radius: 100%;

    }
    .header1 .icon-box:hover{
        background:red;
    }
    .header1 .icon1:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        background-image: -webkit-radial-gradient(center center,farthest-side circle,rgba(26,175,93,0) 70%,#f5f5f5 100%);
        background-image: -moz-radial-gradient(center center,farthest-side circle,rgba(26,175,93,0) 70%,#f5f5f5 100%);
        background-image: -o-radial-gradient(center center,farthest-side circle,rgba(26,175,93,0) 70%,#f5f5f5 100%);
        background-image: radial-gradient(center center,farthest-side circle,rgba(26,175,93,0) 70%,#f5f5f5 100%);
        border: 1px solid #fff;
        animation: wave 3s 1s infinite linear;
        zoom: 1;
        filter: alpha(opacity=0);
        opacity: 0;
        border-radius: 50%;
        background-clip: padding-box;
        box-sizing: border-box;
    }
    .graduate{
        float: right;
        border: 1px solid #4cb6cb;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 0 1px 30px #4cb6cb;
        -moz-transform:rotate(8deg);
        -webkit-transform:rotate(8deg);
        transform:rotate(8deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
    @media (max-width: 768px){
        .myicon-look{
            display:none;
        }
    }
</style>
<body class="">

<section class="vbox">
    #include('header.html')
    <section>
        <section class="hbox stretch">
            <!-- .aside -->
            <aside class="bg-dark dk aside hidden-print nav-xs" id="nav">
                #include('list.html')
            </aside>
            <!-- /.aside -->
            <section id="content">
                <section class="vbox">
                    <section class="scrollable wrapper">
                        <div id="home" class="header">
                            <div class="container">
                                <!-- top-hedader -->
                                <div class="top-header">
                                    <!-- /logo -->
                                    <!--top-nav---->
                                    <div class="top-nav">
                                        <div class="navigation">
                                            <div class="logo">
                                                <h1><a onclick="location.reload()"><span>P</span>个人信息</a></h1>
                                            </div>
                                            <div class="navigation-right">
                                                <nav class="link-effect-3" id="link-effect-3">
                                                    <ul class="nav1 nav nav-wil">
                                                        <li class="active"><a data-hover="基本信息" href="#info">基本信息</a></li>
                                                        <li><a class="scroll" data-hover="个人技能" href="#services" >个人技能</a></li>
                                                        <li><a class="scroll" data-hover="留言板" href="#work">留言板</a></li>
                                                        <li><a class="scroll" data-hover="留言" href="javascript:void(0);"data-toggle="modal" data-target="#myModal">留言</a></li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                        <!-- /top-hedader -->
                                    </div>

                                    <!-- 模态框（Modal） -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        &times;
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">
                                                        欢迎给我留言……
                                                    </h4>
                                                </div>
                                                <div class="modal-body">
                                                    #if(name)
                                                    <form role="form" id="form" method="post" onkeydown="if(event.keyCode==13){return false;}">
                                                        <div class="form-group">
                                                            <label for="name">请在下方填写留言信息。</label>
                                                            <input type="text" id="name" class="form-control" placeholder="留言内容..."
                                                                   name="content" style="height: 100px;">
                                                            <input type="hidden" name="memberId" value="${name.m_id}">
                                                            <input type="hidden" name="accepterId" value="${memberInfo[0].m_id}">
                                                        </div>
                                                    </form>
                                                    #else
                                                    请先登录再进行留言！
                                                    #end
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                    </button>
                                                    <button type="button" class="btn btn-primary" ${name?'onclick="message()"':''}>
                                                        提交留言
                                                    </button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
                                    </div>

                                    <div class="banner-info">
                                        <div class="col-md-7 header-right">
                                            <h1>Hi !</h1>
                                            <h4>我是——${memberInfo[0].m_realname}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                                #if(name)
                                                #if(name.m_id == memberInfo[0].m_id)
                                                <button><a href="/wanshan/${memberInfo[0].m_id}?g=${graduate}">编辑信息</a></button>
                                                #end
                                                #end
                                                #if(graduate==1)
                                                <img class="graduate" width="80" src="/static/images/graduate.png" alt="已毕业">
                                                #end
                                            </h4>
                                            <ul class="address">

                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>学号</b></li>
                                                        <li>${memberInfo[0].m_studentNumber}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>寝室号</b></li>
                                                        <li>$!{memberInfo[0].m_dormitory}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>出生日期</b></li>
                                                        <li>$!{memberInfo[0].m_birthday}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>性别</b></li>
                                                        <li>#if(memberInfo[0].m_sex==1)男
                                                            #elseif(memberInfo[0].m_sex==2)女
                                                            #else 未设置
                                                            #end
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>进入实验室</b></li>
                                                        <li>${memberInfo[0].m_joindate}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>组别</b></li>
                                                        <li>$!{group[0].g_gname}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>QQ</b></li>
                                                        <li>$!{memberInfo[0].m_qq}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>联系电话 </b></li>
                                                        <li>$!{memberInfo[0].m_phone}</li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text">
                                                        <li><b>邮箱 </b></li>
                                                        <li><a href="${memberInfo[0].m_email}">$!{memberInfo[0].m_email}</a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <ul class="address-text" id="trace">
                                                        <li><b>${graduate==1 ? '毕业去向 ' : '近期打算 '}</b></li>
                                                        <li>$!{memberInfo[0].m_trace}
                                                        </li>
                                                    </ul>
                                                </li>

                                            </ul>
                                        </div>
                                        #if(name)
                                        #if(name.m_id == memberInfo[0].m_id)
                                        <div id="crop-avatar">
                                            <div class="col-md-5 header-left avatar-view" title="点击修改头像">
                                                <img src="/static/upload/img/${memberInfo[0].m_headPortrait}" alt="Avatar">
                                            </div>
                                            <!-- Cropping modal -->
                                            <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <form class="avatar-form" action="/upload" enctype="multipart/form-data" method="post">
                                                            <div class="modal-header">
                                                                <button class="close" data-dismiss="modal" type="button">&times;</button>
                                                                <h4 class="modal-title" id="avatar-modal-label">更换头像</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class="avatar-body">

                                                                    <!-- Upload image and data -->
                                                                    <div class="avatar-upload">
                                                                        <input class="avatar-src" name="avatar_src" type="hidden">
                                                                        <input class="avatar-data" name="avatar_data" type="hidden">
                                                                        <label for="avatarInput" style="width: auto;color: red;">请选择2寸证件照</label>
                                                                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file" accept="image/*">
                                                                    </div>

                                                                    <!-- Crop and preview -->
                                                                    <div class="row">
                                                                        <div class="col-md-9">
                                                                            <div class="avatar-wrapper"></div>
                                                                        </div>
                                                                        <div class="col-md-3 myicon-look">
                                                                            <div class="avatar-preview preview-lg"></div>
                                                                            <div class="avatar-preview preview-md"></div>
                                                                            <div class="avatar-preview preview-sm"></div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="row avatar-btns">

                                                                        <div class="col-md-3">
                                                                            <button class="btn btn-primary btn-block avatar-save" type="submit">完成</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- <div class="modal-footer">
                                                              <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                                                            </div> -->
                                                        </form>
                                                    </div>
                                                </div>
                                            </div><!-- /.modal -->

                                            <!-- Loading state -->
                                            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                                        </div>
                                        #else
                                        <div class="col-md-5 header-left ">
                                            <img src="/static/upload/img/${memberInfo[0].m_headPortrait}" alt="Avatar">
                                        </div>
                                        #end
                                        #else
                                        <div class="col-md-5 header-left ">
                                            <img src="/static/upload/img/${memberInfo[0].m_headPortrait}" alt="Avatar">
                                        </div>
                                        #end
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- services -->
                        <div id="services" class="services">
                            <div class="container">
                                <div class="service-head one text-center ">
                                    <h3 >我的 <span>技能</span></h3>
                                    <span class="border one"></span>
                                </div>
                                <!-- services-grids -->
                                <div class="wthree_about_right_grids w3l-agile">
                                    <div class="col-md-6 wthree_about_right_grid">
                                        <div class="col-xs-4 wthree_about_right_grid_left">
                                            <div class="hvr-rectangle-in">
                                                <i class="glyphicon glyphicon-pencil"></i>
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wthree_about_right_grid_right">
                                            <h4>#if(skillsList[0].skillName1)
                                                $!{skillsList[0].skillName1}
                                                #else
                                                用户尚未填写此信息.
                                                #end
                                            </h4>
                                            <p>
                                                #if(skillsList[0].skillContent1)
                                                $!{skillsList[0].skillContent1}
                                                #else
                                                用户尚未填写此信息.
                                                #end
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 wthree_about_right_grid">
                                        <div class="col-xs-4 wthree_about_right_grid_left">
                                            <div class="hvr-rectangle-in">
                                                <i class="glyphicon glyphicon-cog"></i>
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wthree_about_right_grid_right">
                                            <h4>#if(skillsList[0].skillName2)
                                                $!{skillsList[0].skillName2}
                                                #else
                                                用户尚未填写此信息.
                                                #end</h4>
                                            <p>#if(skillsList[0].skillContent2)
                                                $!{skillsList[0].skillContent2}
                                                #else
                                                用户尚未填写此信息.
                                                #end</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 wthree_about_right_grid">
                                        <div class="col-xs-4 wthree_about_right_grid_left">
                                            <div class="hvr-rectangle-in">
                                                <i class="glyphicon glyphicon-leaf"></i>
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wthree_about_right_grid_right">
                                            <h4>#if(skillsList[0].skillName3)
                                                $!{skillsList[0].skillName3}
                                                #else
                                                用户尚未填写此信息.
                                                #end</h4>
                                            <p>#if(skillsList[0].skillContent3)
                                                $!{skillsList[0].skillContent3}
                                                #else
                                                用户尚未填写此信息.
                                                #end</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 wthree_about_right_grid">
                                        <div class="col-xs-4 wthree_about_right_grid_left">
                                            <div class="hvr-rectangle-in">
                                                <i class="glyphicon glyphicon-gift"></i>
                                            </div>
                                        </div>
                                        <div class="col-xs-8 wthree_about_right_grid_right">
                                            <h4>#if(skillsList[0].skillName4)
                                                $!{skillsList[0].skillName4}
                                                #else
                                                用户尚未填写此信息.
                                                #end</h4>
                                            <p>#if(skillsList[0].skillContent4)
                                                ${skillsList[0].skillContent4}
                                                #else
                                                用户尚未填写此信息.
                                                #end</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- services-grids -->
                            </div>
                        </div>



                        <!--services-->
                        <!--work-experience-->
                <div id="work" class="work">
                    <div class="container" id="message">
                        <div class="service-head text-center">
                            <h3>我的 <span>留言</span></h3>
                            <span class="border one"></span>
                        </div>
                        <div class="time-main w3l-agile">
                            <!--<div class="col-lg-6 col-md-6 col-sm-12 year-info">-->
                            <!--<ul class="year">-->
                            <!--#for(int i : range(0,5))-->
                            <!--<li>2016-05-08</li>-->
                            <!--#end-->

                            <!--</ul>-->
                            <!--</div>-->
                            <ul class="col-lg-12 col-md-600 col-sm-12 timeline2">
                            #set(lw=0)
                            #for(LeaveWord leaveword : leaveWordPage.getRows())
                            <li id="lw${leaveword.l_id}">
                            <div class="timeline-panel">
                            <div class="timeline-heading">
                                #if(name)
                                #if(name.m_id == leaveword.l_sender||name.m_id == leaveword.l_accepter)
                                <span style="float:right" title="删除" onclick="deletemessage(${leaveword.l_id})"><i class="fa fa-trash-o text-danger"></i></span>
                                #end
                                #end
                                <h4 class="timeline-title lw_user" onclick="location.href='/users/${lw_user[lw].m_id}'"><img src="/static/upload/img/${lw_user[lw].m_headPortrait}" class="lw_img">${lw_user[lw].m_realname}</h4>
                            </div>
                            <div class="timeline-body">
                                <p>$!{leaveword.l_content} </p>
                                <p style="float:right;">$!{leaveword.l_time.substring(0,19)}</p>
                            </div>
                            </div>
                            </li>
                            #set(lw=lw+1)
                            #end
                            </ul>
                            #if(leaveWordPage.getTotalRows()>0)
                            <div class="text-center">
                                #if(leaveWordPage.totalPages==0)
                                #set(totalPages=1)
                                #else
                                #set(totalPages=leaveWordPage.totalPages)
                                #end
                                <ul class="pagination pagination text-center">
                                    <li><a href="/users/${memberInfo[0].m_id}?page=${leaveWordPage.pageNum-1 > 0 ? leaveWordPage.pageNum-1 : 1 }#message"><i class="fa fa-chevron-left"></i></a></li>
                                    #for(int i : range(1, leaveWordPage.totalPages))
                                    <li class="${i == leaveWordPage.pageNum  ? 'active':''}"><a href="/users/${memberInfo[0].m_id}?page=${i}#message">${i}</a></li>
                                    #end
                                    <li><a href="/users/${memberInfo[0].m_id}?page=${leaveWordPage.pageNum+1 > totalPages ? totalPages : leaveWordPage.pageNum+1}#message"><i class="fa fa-chevron-right"></i></a></li>
                                </ul>
                            </div>
                            #else
                            <ul class="timeline2" style="width: 60%;margin: 0 auto;">
                                <li>
                                    <div class="timeline-panel" style="width:100%;border-bottom:0;box-shadow: 0 1px 6px #4cb6cb;">
                                        <div class="timeline-heading">
                                        </div>
                                        <div class="timeline-body">
                                            <p style="text-align:center;"><i class="text-danger icon-info"></i>  该用户还未收到留言哦~  快给他送上第一条留言吧。</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            #end
                            <div class="header1"><a class="scroll" data-hover="留言" href="javascript:void(0);" data-toggle="modal" data-target="#myModal"><div class="icon-box"><i class="icon-note icon1"></i></div></a></div>
                        </div>
                    </div>
                </div>


                        <script src="/static/js/jquery-3.3.1.js"></script>
                        <script src="/static/js/slimscroll/jquery.slimscroll.min.js"></script>
                        <script src="/static/js/app.plugin.js"></script>
                        <script type="text/javascript" src="/static/js/jPlayer/jquery.jplayer.min.js"></script>
                        <script type="text/javascript" src="/static/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
                        <script type="text/javascript" src="/static/js/jPlayer/demo.js"></script>
                        <script src="/static/js/sortable/jquery.sortable.js"></script>
                        <script src="/static/js/nestable/jquery.nestable.js"></script>

                        <script src="/static/js/showinfo/easing.js"></script>
                        <script src="/static/js/showinfo/move-top.js"></script>
                        <script src="/static/js/app.js"></script>
                        <script src="/static/js/bootstrap.js"></script>
                        <script src="/static/js/cropper.min.js"></script>
                        <script src="/static/js/main.js"></script>
                        <script src="/static/js/header.js"></script>

                        <script>
                            function deletemessage(id){
                                if(confirm('确定删除该留言吗？')){
                                    $.ajax({
                                        url:"/deletemessage/"+id,
                                        dataType:"json",
                                        type:"post",
                                        success:function(result){
                                            alert(result.tips);
                                            $("#lw"+id).remove();
                                            <!--window.location.reload();-->
                                            <!--window.location.href="/users/${memberInfo[0].m_id}#message";-->
                                            <!--$("#name").val("");-->
                                        },
                                        error:function(result){
                                            alert("系统繁忙！");
                                         }
                                    });
                                }
                            }

                            function message(){
                                if($("#name").val()=="")
                                    alert("留言内容不能为空！");
                                else{
                                    $.ajax({
                                        url:"/domessage",
                                        dataType:"json",
                                        type:"post",
                                        data:$("#form").serialize(),
                                        success:function(result){
                                            alert(result.tips);
                                            window.location.reload();
                                            window.location="/users/${memberInfo[0].m_id}?page=1#message";
                                            <!--$("#name").val("");-->
                                        },
                                        error:function(result){
                                            alert("系统繁忙！");
                                         }
                                    });

                                }

                            }

                            $(function(){
                                var h3_height = $("#message").offset().top;
                                $(window).scroll(function(){
                                    var this_scrollTop = $(this).scrollTop();
                                    if(this_scrollTop+$(window).height()>h3_height&&this_scrollTop+$(window).height()-300<h3_height){
                                        $(".header1").show();
                                    }
                                    else{
                                        $(".header1").hide();
                                    }
                                });
                            });



                        </script>
                    </section>
                    #include('footer.html')
                </section>
                <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
            </section>
        </section>
    </section>
</section>


<!--<script src="/static/js/jquery.min.js"></script>-->
<!--<script src="/static/js/bootstrap.js"></script>-->
<!-- App -->



</body>
</html>